《Android 应用之路》 MPAndroidChart~BarChart

简介

MPAndroidChart是PhilJay大神给Android开发者带来的福利。MPAndroidChart是一个功能强大并且使用灵活的图表开源库，支持Android和IOS两种，这里我们暂时只关注Android版本。

Wiki

https://github.com/PhilJay/MPAndroidChart/wiki

Javadoc

https://jitpack.io/com/github/PhilJay/MPAndroidChart/v3.0.0-beta1/javadoc/

今日之图~BarChart

先看图，压压惊
这里写图片描述

这里写图片描述

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="mapdemo.example.com.mpandroidchartdemo.MainActivity">
    <!-- 主布局中添加BarChart-->
    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barchart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!" />
</RelativeLayout>

对于Chart,可以采用布局文件添加方式，也可以采用代码添加方式。

代码

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.barchart)
    BarChart barchart;

    private Random random;//用于产生随机数字

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        random = new Random();
        initBarChart();
    }

    private void initBarChart() {
        ArrayList<BarEntry> yVals = new ArrayList<>();//Y轴方向第一组数组
        ArrayList<BarEntry> yVals2 = new ArrayList<>();//Y轴方向第二组数组
        ArrayList<BarEntry> yVals3 = new ArrayList<>();//Y轴方向第三组数组
        ArrayList<String> xVals = new ArrayList<>();//X轴数据

        for (int i = 0; i < 12; i++) {//添加数据源
            xVals.add((i + 1) + "月");
            yVals.add(new BarEntry(random.nextInt(10000), i));
            yVals2.add(new BarEntry(random.nextInt(10000), i));
            yVals3.add(new BarEntry(random.nextInt(10000), i));

        }

        BarDataSet barDataSet = new BarDataSet(yVals, "小明每月支出");
        barDataSet.setColor(Color.RED);//设置第一组数据颜色

        BarDataSet barDataSet2 = new BarDataSet(yVals2, "小花每月支出");
        barDataSet2.setColor(Color.GREEN);//设置第二组数据颜色

        BarDataSet barDataSet3 = new BarDataSet(yVals3, "小蔡每月支出");
        barDataSet3.setColor(Color.YELLOW);//设置第三组数据颜色

        ArrayList<IBarDataSet> threebardata = new ArrayList<>();//IBarDataSet 接口很关键，是添加多组数据的关键结构，LineChart也是可以采用对应的接口类，也可以添加多组数据
        threebardata.add(barDataSet);
        threebardata.add(barDataSet2);
        threebardata.add(barDataSet3);

        BarData bardata = new BarData(xVals, threebardata);
        barchart.setData(bardata);
        barchart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);//设置注解的位置在左上方
        barchart.getLegend().setForm(Legend.LegendForm.CIRCLE);//这是左边显示小图标的形状

        barchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//设置X轴的位置
        barchart.getXAxis().setDrawGridLines(false);//不显示网格

        barchart.getAxisRight().setEnabled(false);//右侧不显示Y轴
        barchart.getAxisLeft().setAxisMinValue(0.0f);//设置Y轴显示最小值，不然0下面会有空隙
        barchart.getAxisLeft().setDrawGridLines(false);//不设置Y轴网格

        barchart.setDescription("No Deal");//设置描述
        barchart.setDescriptionTextSize(20.f);//设置描述字体
        barchart.animateXY(1000, 2000);//设置动画
    }
}

这里，一些使用方式可以具体去看看对应的类机构，比如BarChart

这里写图片描述

通过查看它对应的源码，可以更好的使用功能，AS会自动的帮我们反编译一些内容，能借助AS很好的学习一些开源Jar包。

在上面这个例子中，如何让现实的数值为“xxx元”呢？

MPAndroidChart中存在ValueFormatter这个东西，通过这个还做一个转换，如实现“xxx元”的效果

bardata.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float v, Entry entry, int i, ViewPortHandler viewPortHandler) {
                return entry.getVal() + "元";//只用拿到对应Entry的值然后加个“元”即可，传入的这几个参数，v就是Y轴的value, entry为数据入口，i就是X轴方向的位置，viewPortHandler应该就是对应View的操作手，控制视图的移动缩放什么的
            }
        });